<template>
  <div class="add-user">
    <Header :left-arrow="true" :title="$route.query.title"/>
    <van-form ref="addUserForm" @submit="onSubmit">
      <van-field
        v-model="courseDatas.title"
        :rules="[
          {
            nonVoidReg,
            required: true,
            message: '课程名称不能为空'
          }
        ]"
        name="title"
        label="课程名称"
        placeholder="请填写课程名称"
      />
      <van-field
        v-model="courseDatas.price"
        :rules="[
          {
            nonVoidReg,
            required: true,
            message: '课程名称不能为空'
          }
        ]"
        name="price"
        label="课程名称"
        placeholder="请填写课程名称"
      />
      <van-field
        v-model="courseDatas.duration"
        :rules="[
          {
            nonVoidReg,
            required: true,
            message: '课程时长不能为空'
          }
        ]"
        name="duration"
        label="课程时长"
        placeholder="请填写课程时长"
      />
      <div style="margin: 16px;">
        <van-button :disabled="$route.query.isForbidden === 'true'" round block type="info" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { nonVoidReg } from './../../utils/validation_rule'
import Header from './../../components/Header/Header'

export default {
  name: 'AddCourse',
  components: {
    Header
  },
  data() {
    return {
      courseDatas: {
        courseTitle: '', // 课程名称
        price: '', // 课程费用
        duration: '' // 课程时长
      },
      nonVoidReg // 非空验证
    }
  },
  mounted() {
    // this.$refs.addUserForm.resetValidation()
    // console.log(this.$route.query)
  },
  activated() {
    this.userDatas = {
      username: '', // 用户名
      gender: '1', // 性别
      phone: '', // 手机号
      balance: '', // 余额
      monetary: '', // 消费金额
      income: '' // 收入金额
    }
    /**
     * 重置表单验证规则
     */
    this.$refs.addUserForm.resetValidation()
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values)
    }
  }
}
</script>

<style scoped lang="less" rel="stylesheet/less">

</style>
